<!DOCTYPE html> <html lang="fr" data-theme="dark">  <head> <meta charset="UTF-8" /> <title>📜 Encodeur / Décodeur</title> <meta name="robots" content="index, follow, notranslate, noarchive, nosnippet" />  <meta name="author" content="sync" />  <link rel="sitemap" type="application/xml" href="https://feuille-heures-angelique.neocities.org/sitemap.xml" /> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebApplication", "name": "Script pour Webmaster", "url": "https://feuille-heures-angelique.neocities.org/index.html", "applicationCategory": "UtilitiesApplication", "operatingSystem": "Web", "browserRequirements": "Requires a modern web browser", "description": "Encodeur / Décodeur. | Base64 | URL Encoding | Hexadecimal | Encoding | ASCII | Encoding |, Compatible avec PC, smartphone, Android et iOS.", "author": { "@type": "Person", "name": "Angélique", "jobTitle": "sync" }, "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" } } </script> <style type="text/css"> :root { --bg: #66CC99; /* blanc #f4f4f4 */ --text: #222; --card: #FFFFCC; --accent: #007bff; --muted-light: #666; /* Couleur pour le texte dans le mode clair */ --muted-dark: #999; /* Couleur pour le texte dans le mode sombre */ --textarea-bg-light: #CCCCCC; /* Gris clair pour le mode clair */ --textarea-bg-dark: #333; /* Gris foncé pour le mode sombre */ } [data-theme="dark"] { --bg: #1b1b1b; --text: #eaeaea; --card: #2a2a2a; --accent: #4da3ff; --muted-light: #999; /* Couleur du texte dans le mode sombre */ --muted-dark: #66CC99; /* Couleur pour le texte dans le mode sombre */ --textarea-bg-light: #333; /* Gris foncé pour le mode sombre */ --textarea-bg-dark: #666; /* Un gris encore plus foncé pour les champs */ } body { font-family: Arial, sans-serif; background: var(--bg); color: var(--text); padding: 20px; transition: 0.25s; } .container { max-width: 650px; margin: auto; background: var(--card); padding: 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); transition: 0.25s; } textarea { width: 90%; height: 130px; padding: 12px; margin-bottom: 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; background-color: var(--textarea-bg-light); /* Gris clair par défaut pour le mode clair */ color: var(--text); transition: 0.25s; font-family: monospace; display: block; margin: 0 auto; } [data-theme="dark"] textarea { background-color: var(--textarea-bg-dark); /* Gris foncé pour le mode sombre */ } button { padding: 10px 16px; font-size: 15px; cursor: pointer; border: none; border-radius: 8px; background: var(--accent); color: white; transition: 0.2s; } button:hover { opacity: 0.8; } .toolbar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; width: 90%; margin: 5px auto 4px auto; text-align: left; } .secondary { background: #888; } .danger { background: #d9534f; } .theme-toggle { float: right; background: var(--accent); transition: background 0.3s ease; } .right, .danger { text-align: right; margin: 10px 20px 5px auto; } label { display: block; width: 90%; margin: 10px auto 4px auto; text-align: left; font-size: 16px; } select { display: block; width: 85%; margin: 10px auto 4px auto; text-align: left; font-size: 14px; cursor: pointer; color: var(--text); background-color: var(--textarea-bg-light); border: 1px solid #ccc; border-radius: 8px; transition: 0.25s; } [data-theme="dark"] select { background-color: var(--textarea-bg-dark); border: 1px solid #444; color: var(--text); } .footerNote { font-size: 13px; color: var(--muted-light); text-align: center; text-shadow: 0 0 11px #fff; } [data-theme="dark"] .footerNote { color: var(--muted-dark); } h2 { text-align: center; margin-top: 10px; font-size: 30px; text-shadow: 0 0 10px #fff; } h3 { text-align: center; margin-top: 10px; font-size: 15px; text-shadow: 0 0 11px #fff; } .info-textarea { width: 90%; height: 100px; margin-top: 15px; padding: 12px; border-radius: 8px; border: 1px solid #ccc; background-color: var(--textarea-bg-light); color: var(--text); font-family: monospace; resize: none; display: block; margin: 0 auto; font-size: 14px; } [data-theme="dark"] .info-textarea { background-color: var(--textarea-bg-dark); color: var(--text); } </style> </head> <body> <div class="container"> <button class="theme-toggle" onclick="toggleTheme()" aria-label="Changer le thème">🌞 Mode clair</button> <h2>🔄 Encodeur / Décodeur</h2> <h3>| Base64 | URL Encoding | Hexadecimal | Encoding | ASCII | Encoding |</h3> <label for="encoding">Choisissez votre encodage/décodage</label> <select id="encoding"> <option value="base64">Base64</option> <option value="url">URL Encoding</option> <option value="hex">Hexadecimal Encoding</option> <option value="ascii">ASCII Encoding</option> </select> <label>Texte normal :</label> <textarea id="normal"></textarea> <div class="toolbar"> <button onclick="encode()">🌀 Encoder →</button> <button class="secondary" onclick="copy('normal')">📋 Copier</button> </div> <label>Texte encodé :</label> <textarea id="encoded"></textarea> <div class="toolbar"> <button onclick="decode()">← Décoder 🔄</button> <button class="secondary" onclick="copy('encoded')">📋 Copier</button> </div> <div class="right"> <button class="danger" onclick="clearAll()">🧹 Effacer tout🔥 </button> </div>  <textarea class="info-textarea" id="info" readonly>Choisissez un encodage pour obtenir une description ici.</textarea> </div> <div class="footerNote"> <br>Encodeur / Décodeur — Conçu pour PC • Android • iOS<br> <a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d’heures Angélique (fr)</a> </div> <script type="text/javascript" language="javascript"> // Fonction pour l'encodage function encode() { let text = document.getElementById("normal").value; let encodingType = document.getElementById("encoding").value; let encoded; if (encodingType === "base64") { encoded = btoa(unescape(encodeURIComponent(text))); updateInfo("La fonction Base64 est un groupe de schémas pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains contenus MIME."); } else if (encodingType === "url") { encoded = encodeURIComponent(text); updateInfo("L'URL Encoding (ou encodage d'URL) permet de convertir les caractères spéciaux dans une URL en leur équivalent ASCII sécurisé."); } else if (encodingType === "hex") { encoded = text.split('').map(function(char) { return char.charCodeAt(0).toString(16); }).join(''); updateInfo("L'Hexadecimal Encoding est un format qui représente des données sous forme de valeurs hexadécimales, souvent utilisées pour des systèmes binaires."); } else if (encodingType === "ascii") { encoded = text.split('').map(function(char) { return char.charCodeAt(0); }).join(' '); updateInfo("L'ASCII Encoding est une méthode pour convertir des caractères en valeurs numériques représentant chaque caractère en code ASCII."); } document.getElementById("encoded").value = encoded; } // Fonction pour le décodage function decode() { let text = document.getElementById("encoded").value; let encodingType = document.getElementById("encoding").value; let decoded; if (encodingType === "base64") { try { decoded = decodeURIComponent(escape(atob(text))); } catch (e) { alert("Base64 invalide !"); return; } } else if (encodingType === "url") { decoded = decodeURIComponent(text); } else if (encodingType === "hex") { decoded = text.match(/.{1,2}/g).map(function(byte) { return String.fromCharCode(parseInt(byte, 16)); }).join(''); } else if (encodingType === "ascii") { decoded = text.split(' ').map(function(code) { return String.fromCharCode(parseInt(code, 10)); }).join(''); } document.getElementById("normal").value = decoded; } // Fonction pour copier function copy(id) { let content = document.getElementById(id); if (content.value.trim() === "") { alert("Aucun texte à copier!"); return; } content.select(); document.execCommand("copy"); alert("Copié !"); } // Fonction pour effacer tout function clearAll() { document.getElementById("normal").value = ""; document.getElementById("encoded").value = ""; document.getElementById("info").value = "Choisissez un encodage pour obtenir une description ici."; } // Fonction pour changer de thème function toggleTheme() { const html = document.documentElement; let dark = html.getAttribute("data-theme") === "dark"; html.setAttribute("data-theme", dark ? "light" : "dark"); document.querySelector(".theme-toggle").textContent = dark ? "🌙 Mode sombre" : "🌞 Mode clair"; } // Fonction pour mettre à jour l'information dans le textarea function updateInfo(text) { document.getElementById("info").value = text; } </script> </body> </html>